<template>
  <div class="avchatroom-item">
  <!-- 音视频聊天室，webim支持游客（不登录）接收该群组类型消息，初始化后joinGroup即可 -->
    <el-container class="avchatroom-item-wrapper" v-if="!isMobile()">
      <el-main class="video-wrapper" width="80%">
        <div id="video-container"></div>
      </el-main>
      <el-aside class="chat-wrapper" width="20%">
        <div class="chat-title">
          音视频聊天室
          <i :title="title" class="el-icon-warning-outline" style="color:#000"></i>
        </div>
        <div class="chat-content" :title="isLogin ? '' : '登录后可发送消息'">
          <MessageItem v-for="message in currentMessageList" :key="message.ID" :message="message"/>
        </div>
        <div class="login-tips-box" v-if="!isLogin">
          <div class="login-tips">
            <span @click="login">登录</span>发弹幕，参与主播互动
          </div>
        </div>
        <div class="chat-send-box" v-if="isLogin">
          <MessageSendBox />
        </div>
      </el-aside>
    </el-container>
    <!-- 优化手机端体验 -->
    <div class="mobile-avchatroom-item-wrapper" v-if="isMobile()">
      <div id="video-container"></div>
      <div class="mobile-chat-wrapper">
        <div class="chat-title">
            音视频聊天室
        </div>
        <div class="chat-content" :class="isLogin ? '' : 'chat-no-login'" :title="isLogin ? '' : '登录后可发送消息'">
          <MessageItem v-for="message in currentMessageList" :key="message.ID" :message="message"/>
        </div>
        <div class="login-tips-box" v-if="!isLogin">
          <div class="login-tips">
            <span @click="login">登录</span>发弹幕，参与主播互动
          </div>
        </div>
        <div class="chat-send-box" v-if="isLogin">
          <MessageSendBox />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import MessageItem from '../message/MessageItem.vue';
import MessageSendBox from '../message/MessageSendBox.vue';

export default {
  data(){
    return {
      videoUrl: 'https://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4',
      contentWidth: 0,
      contentHeight: 0,
      playerWidth: 0,
      playerHeight: 0,
      tcplayer: null,
      title:'该页面类似直播聊天室，可以让用户和其他观众、主播互动，可以实现不登录的情况下接收其他观众消息（登录后才能发送消息）'
    }
  },
  computed:{
    ...mapState({
      currentMessageList: state => state.conversation.currentMessageList,
      currentConversation: state => state.conversation.currentConversation,
      isLogin: state => state.user.isLogin
    })
  },
  components:{
    MessageItem,
    MessageSendBox
  },
  mounted(){
    this.initTcPlayer();
  },
  updated(){
    // 发送消息后自动滚动到最下，el-main获取不到refs.scrollHeight参数，通过以下方式解决
    let messageListNode = document.getElementsByClassName('chat-content');
    // 切换后updated会触发两次，当数组长度为1时才能修改（待确认原因）
    if(messageListNode.length === 1){
      messageListNode[0].scrollTop = messageListNode[0].scrollHeight;
    }
  },
  methods:{
    initTcPlayer(){
      const options = {
        mp4: this.videoUrl,
        width: '100%',
        height: '100%'
      }
      this.tcplayer = new window.TcPlayer('video-container', options);
    },
    isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag;
    },
    login(){
      this.$store.commit('toggleIsLoginItemVisible',true);
    }
  }
}
</script>

<style scoped>
.avchatroom-item{
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
  height: 100%;
}
.avchatroom-item-wrapper{
  position: relative;
  /* max-width: 1440px; */
  margin: 80px 80px 40px 80px;
}
.avchatroom-item-wrapper .el-main{
  padding: 0;
}
.chat-wrapper{
  position: relative;
  background-color: #f5f5f5;
  min-width: 400px;
}
.chat-title{
  position: absolute;
  top: 0;
  left: 5px;
  height: 30px;
  line-height: 30px;
  /* css内阴影文字效果 */
  color: transparent;
  background-color : black;
  text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
  -webkit-background-clip : text;
}
.chat-content{
  position: absolute;
  width: 100%;
  top: 30px;
  bottom: 120px;
  border-top: 1px solid #e7e7e7;
  overflow: scroll;
}
.chat-send-box{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  border-top: 1px solid #e7e7e7;
}
.mobile-avchatroom-item-wrapper{
  position: relative;
  margin: 80px 80px 40px 80px;
  height: 90%;
}
.mobile-chat-wrapper{
  position: relative;
  background-color: #f5f5f5;
  height: 90%;
  max-height: 1000px;
}
.login-tips-box{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  border-top: 1px solid #e7e7e7;
}
.login-tips{
  font-size: 16px;
  text-align: center;
  color: #a5b5c1;
  margin-top: 50px;
}
.login-tips span{
  color: #f70;
  cursor: pointer;
}
</style>